<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>模拟3d</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            user-select: none;
        }
        #root {
            width: 500px;
            height: 500px;
            /* background-color: #c4eef8; */
        }
        #root .model-box {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div id="root">
        <canvas class="model-box" width="500px" height="500px"></canvas>
    </div>
    <script src="./laoyuMod.js"></script>
    <script>
        // 搭建3d场景
        const canvas = document.querySelector(".model-box");
        const world = new World(canvas);

        // 尝试绘制一个多边形
        // let ctx = world.canvas.getContext('2d');
        // world.drawPolygon(ctx, [-100, -100], [100, 150], [50, 150], '#000');

        // 请求模型文件
        fetch("./mode1.laoyumod", {
            method: "get",
            headers: {
                "Content-Type": "application/json"
            }
        }).then(res => {
            if (!res.ok) {
                throw new Error("请求失败");
            }
            return res.json();
        }).then(data => {
            // 绘制模型文件
            console.log(data);
            world.createModel(data);
        }).catch(err => {
            console.log(err);
        });
    </script>
</body>
</html>